<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>全选案列</title>
</head>
<body>
    <input type="checkbox" name="box"> 看书
    <input type="checkbox" name="box"> 唱歌
    <input type="checkbox" name="box"> 跳舞
    <input type="checkbox" name="checkAll"> 全选
    <!-- 必须得满足至少有一个被选中了，才能提交，否则disabled -->
    <button id="btn" disabled>提交</button> 
</body>
  <script>
    /*
      为什么要将伪数组转成数组？
      看需求吧，转成数组后就可以使用数组中的方法了
    */

    var doms = document.querySelectorAll('input[name=box]');
    var checkAllDom = document.querySelector('input[name=checkAll]');
    var btn = document.querySelector('#btn');

    //点击单独按钮
    for(var i=0;i<doms.length;i++){
      doms[i].onclick = () => {
        check();
      }
    }

    //全选
    checkAllDom.onclick = () => {
      console.log(this); // 这个真奇怪，this竟然指向window
      doms.forEach((item) => {
        item.checked = checkAllDom.checked;
      })
    }

    function check() {
      checkAllDom.checked = [...doms].every((item) => { // 全部选中，结果为true
        return item.checked;
      })

      var isChecked = [...doms].some((item) => { // 至少有一个选中，结果为true
        return item.checked;
      })

      btn.disabled = !isChecked;
    }
    
  </script>
</html>